<template>
  <view class="exam-swiper exam-full">
    <view class="exam-top">
      <text class="label">进度：</text>
      <progress activeColor="#f72e88" :percent="total ? answered / total : 0" stroke-width="3" />
      <view class="info">
        <text class="num">{{answered}}</text>/<text class="num">{{total}}</text>
      </view>
    </view>
    <view class="exam-wrapper">
      <view class="desc">
        {{question.desc}}
      </view>
      <view class="exam-item" v-for="(ques, index) in questions" :key="index">
        <view class="content">
          <view class="stem">
            <text class="type">{{ques.questionType === 1 ? '单选' : '多选'}}</text>
            {{ques.content}}
          </view>
          <view class="ques" v-if="ques.options.length">
            <view v-for="(q, inx) in ques.options" :key="inx" :class="{'ques-item': true, active: q.result}" @tap="handAnswerSelect(index, inx)">
              <text>{{q.content}}</text>
            </view>
          </view>
        </view>
      </view>

    </view>
    <view class="exam-footer">
      <!-- <button @tap="prev">上一题</button>
      <button v-if="current < total - 1" class="primary right" type="primary" @tap="next">下一题</button> -->
      <button v-if="answered >= total" class="primary right" type="primary" @tap="save">提交答案</button>
    </view>
  </view>
</template>
<script>
  import Api from '@/api/main'
  export default {
    data() {
      return {
        answers: [],
        // 当前题
        current: 0,
        basicInfo: [],
        zjhm: '',
        question: {
          // id: 1,
          // name: 'A-PKU测评',
          // total: 4,
          // type: 1,
          // desc: '游戏是孩子学习的一种重要的方式，幼儿期自由或者非结构化的游戏是儿童了解自己世界的一个重要途径。',
          // basicInfo: [],
          // details: [
          // {
          //   id: 1,
          //   desc: '游戏是孩子学习的一种重要的方式，幼儿期自由或者非结构化的游戏是儿童了解自己世界的一个重要途径。',
          //   content: '1.您的孩子是否能够与他人进行合作游戏',
          //   scoreRatio: 2,
          //   scorePrecision: 2,
          //   questionType: 1,
          //   options: [
          //   {
          //     id: 1,
          //     content: 'A.是',
          //     score: 1,
          //     result: 0
          //   },
          //   {
          //     id: 2,
          //     content: 'B.否',
          //     score: 1,
          //     result: 0
          //   }]
          // },
          // {
          //   id: 2,
          //   desc: '游戏是孩子学习的一种重要的方式，幼儿期自由或者非结构化的游戏是儿童了解自己世界的一个重要途径。',
          //   content: '1.您的孩子是否能够与他人进行合作游戏',
          //   scoreRatio: 2,
          //   scorePrecision: 2,
          //   questionType: 2,
          //   options: [
          //   {
          //     id: 1,
          //     content: 'A.是',
          //     score: 1,
          //     result: 0
          //   },
          //   {
          //     id: 2,
          //     content: 'B.否',
          //     score: 1,
          //     result: 0
          //   }]
          // }
          // ]
        },
        // questions: [
        // {
        //   type: 1,
        //   typeTxt: '单选',
        //   desc: '游戏是孩子学习的一种重要的方式，幼儿期自由或者非结构化的游戏是儿童了解自己世界的一个重要途径。',
        //   stem: '1.您的孩子是否能够与他人进行合作游戏',
        //   questions: [
        //   {
        //     value: 'A',
        //     label: 'A.是'
        //   },
        //   {
        //     value: 'B',
        //     label: 'B.否'
        //   }]
        // },
        // {
        //   type: 2,
        //   typeTxt: '多选',
        //   stem: '2.您的孩子是否能够与他人进行合作游戏',
        //   desc: '游戏是孩子学习的一种重要的方式，幼儿期自由或者非结构化的游戏是儿童了解自己世界的一个重要途径。',
        //   questions: [
        //   {
        //     value: 1,
        //     label: 'A.是'
        //   },
        //   {
        //     value: 2,
        //     label: 'B.否'
        //   }]
        // },
        // {
        //   type: 1,
        //   typeTxt: '单选',
        //   stem: '3.您的孩子是否能够与他人进行合作游戏',
        //   desc: '游戏是孩子学习的一种重要的方式，幼儿期自由或者非结构化的游戏是儿童了解自己世界的一个重要途径。',
        //   questions: [
        //   {
        //     value: 1,
        //     label: 'A.是'
        //   },
        //   {
        //     value: 2,
        //     label: 'B.否'
        //   }]
        // }]
      }
    },
    computed: {
      questions() {
        return this.question.details || []
      },
      // 题目数量
      total() {
        if (!this.questions) {
          return 0
        }
        return this.questions.length
      },
      answered() {
        let answered = []
        this.questions.forEach((ques, index) => {
          ques.options.forEach(opt => {
            if (opt.result) {
              answered[index] = 1
            }
          })
        })
        return answered.filter(ans => !!ans).length
      }
    },
    methods: {
      async getQuestionnaire() {
        const res = await this.$http.post(Api.getQuestionnaire, { id: this.id, zjhm: this.zjhm })
        if (res) {
          this.question = res
        }
      },
      handAnswerSelect(index, inx) {
        const question = this.questions[index]
        const options = question.options || []
        const option = options[inx]
        const { questionType } = question
        if (!option) {
          return
        }

        const clear = () => {
          options.forEach(opt => {
            this.$set(opt, 'result', 0)
          })
        }

        console.log(question, option);

        if (questionType === 1) {
          // 单选
          clear()
          this.$set(this.question.details[index].options[inx], 'result', option.result ? 0 : 1)
        } else {
          // 多选
          this.$set(this.question.details[index].options[inx], 'result', option.result ? 0 : 1)
        }

        this.questions = Object.assign({}, this.questions)
      },
      prev() {
        if (this.current) {
          this.current -= 1
        }
      },
      next() {
        if (this.current < this.questions.length - 1) {
          this.current += 1
        }
      },
      // 提交答案
      async save() {
        const params = {
          zjhm: this.zjhm,
          ...this.question,
          basicInfo: this.basicInfo
        }
        console.log('answer', params);
        const res = await this.$http.post(Api.saveQuestionnaire, params)
        if (res) {
          this.$toast('保存成功');
          setTimeout(() => {
            // uni.navigateBack();
            uni.redirectTo({
              url: `/pages/health/result?result=${encodeURIComponent(JSON.stringify(res))}`
            })
          }, 200);
        }
        // uni.redirectTo({
        //   url: '/pages/health/result'
        // })
      }
    },
    async onLoad({ id, name, info, zjhm }) {
      this.zjhm = zjhm
      uni.showLoading({
        title: '加载中...'
      });
      uni.setNavigationBarTitle({
        title: name
      });
      this.id = id
      try {
        this.basicInfo = JSON.parse(decodeURIComponent(info));
      } catch (error) {
        this.basicInfo = []
      }
      console.log('basicInfo', this.basicInfo);
      await this.getQuestionnaire()
      uni.hideLoading();
    }
  }
</script>
<style lang="scss">
  .exam {
    &-swiper {
      width: 100%;
      padding: 30rpx 40rpx 30rpx;
      background: linear-gradient(181deg, #fa6bac 0%, #f78acb 15%, #faaae9 43%, #f7d0ef 90%);
      display: flex;
      flex-direction: column;

      swiper,
      .swiper {
        height: 100%;
      }
    }

    &-full {
      .exam-footer>button {
        width: 100%;
      }
    }

    &-top {
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      progress {
        flex: 1;
      }

      .label,
      .info {
        width: 120rpx;
        height: 60rpx;
        text-align: center;
        font-size: 32rpx;
        color: #ffffff;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    &-wrapper {
      padding: 20rpx;
      flex: 1;
      background-color: #ffffff;
      overflow-y: scroll;
      overflow-x: hidden;
      border-radius: 24rpx;

      .desc {
        padding: 20rpx;
        color: $uni-color-primary;
        background-color: rgba($color: $uni-color-primary, $alpha: 0.06);
        border-radius: 24rpx;
        font-size: 28rpx;
      }

      .content {
        padding: 20rpx 0 0;
        border-radius: 24rpx;
        font-size: 32rpx;

        .stem {
          line-height: 1.8;
        }

        .type {
          margin-right: 8rpx;
          display: inline-block;
          padding: 0rpx 28rpx;
          background-color: rgba($color: $uni-color-success, $alpha: 0.2);
          border-radius: 12rpx;
          // line-height: 1.5;
          font-size: 28rpx;
          color: $uni-color-success;
        }

        .ques {
          margin-top: 20rpx;
          line-height: 2;

          &-item {
            margin-bottom: 20rpx;
            padding: 0 20rpx;
            border-radius: 14rpx;
            border: 2px solid transparent;

            &.active {
              background-color: rgba($color: $uni-color-primary, $alpha: 0.2);
              border-color: $uni-color-primary;
            }
          }
        }
      }
    }

    &-footer {
      margin-top: 20rpx;
      padding: 0 20rpx;
      // width: 100%;
      height: 100rpx;
      // display: flex;
      // justify-content: space-between;
      // align-items: center;

      button {
        display: inline-block;
        margin: 0;
        width: 40%;
      }

      .button-hover {
        color: #ffffff;
      }

      .right {
        float: right;
      }
    }


  }
</style>